import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:test01/okhttp_test/pojo/commentdto_pojo.dart';
import 'package:test01/okhttp_test/pojo/rewrite/new_page_view.dart' as new_page_view;
import 'package:test01/okhttp_test/pojo/rewrite/new_page_view.dart';

/*
*
* 轮播图以及动画
*
* */

///轮播图
class DynamicSwiperPage extends StatefulWidget {
  ///传值
  ListModel listmodel;
  double proportion_height;

  DynamicSwiperPage(this.listmodel, this.proportion_height);

  @override
  DynamicSwiperPageState createState() => DynamicSwiperPageState();
}

class DynamicSwiperPageState extends State<DynamicSwiperPage> {
  var swiperPagination;
  String url;
  int itemCount = 0; //显示的条数
  int url_show = 1; //正在显示的条数
  ///切换图片圆圈大小
  double min_circular = 2.0;
  double midlle_circular = 4.0;
  double max_circular = 6.0;

  ///设置最终显示宽度
  double circular_with;

  ///判断是否启用动画
  bool circular_bool = false;

  ///Container宽度
  double container_with_circular = 40;

  ScrollController controller = ScrollController();

  ///设置偏移值
  offsetCircular(int urlShow) {
    if (itemCount > 5) {
      if (urlShow > 2 && urlShow < 7) {
        controller.animateTo(((urlShow - 3) * 9).toDouble(),
            duration: Duration(milliseconds: 300), curve: Curves.easeInOutSine);
      } else {
        if (urlShow >= 7) {
          controller.animateTo(((urlShow - 3) * 9).toDouble(),
              duration: Duration(milliseconds: 300),
              curve: Curves.easeInOutSine);
        }
      }
    }
  }

  ///设置偏移值之后的动态宽度
  containerWithCircular() {
    if (url_show <= 3) {
      container_with_circular = 40;
    }
    if (url_show <= 6 && url_show > 3) {
      container_with_circular = 38;
    }
    if (url_show > 6) {
      container_with_circular = 41;
    }
  }

  ///轮播图片
  Widget rotatePictures() {
    return Container(
      height: widget.proportion_height,
      child: Stack(
        children: <Widget>[
          new_page_view.PageView.builder(
            pageSnapping:false,// 必需设置为false下面直定义的滑动才会生效 此时是否自定义滚动行为
            physics:pageScrollPhysics(),
            // 在当前元素预加载下一个元素
            allowImplicitScrolling: false,
            itemCount: itemCount,
            itemBuilder: (context, index) {
              ///设置图片路径
              if (widget.listmodel.picUrls.length != 0) {
                url = widget.listmodel.picUrls[index].url;
              } else {
                url = widget.listmodel.videos[index].coverUrl;
              }
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => DynamicHeroPicture(
                              herourl: url,
                              herorandom: "${widget.listmodel.id}_$index")));
                  print("----------------图片放大------------------");
                },
                child: Hero(
                  tag: 'hero${widget.listmodel.id}_$index',
                  child: Container(
                      child:
                          // Image.network(url,fit:BoxFit.cover,),
                          CachedNetworkImage(
                    imageUrl: url,
                    fit: BoxFit.cover,
                  )),
                ),
              );
            },

            ///获取图片滑动时的数据动态，利用回调函数进行赋值
            onPageChanged: (index) {
              ///当前滑动的下标
              url_show = index + 1;

              ///调用宽度
              containerWithCircular();

              ///调用偏移方法
              offsetCircular(url_show);

              ///初始化
              setState(() {});
            },
          ),
          itemCount > 1
              ? Container(
                  alignment: Alignment(1, -1),
                  child: Container(
                    width: 40,
                    height: 23,
                    alignment: Alignment.center,
                    margin: EdgeInsets.only(right: 16),
                    decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.5),
                        borderRadius: BorderRadius.circular(23)),
                    child: Text(
                      "$url_show/$itemCount",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }

  ///下面的轮播按钮
  Widget carouselButton() {
    return Container(
        alignment: Alignment.center,
        height: 28,
        child: Container(
          width: container_with_circular,
          child: itemCount == 1
              ? Container()
              : ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  reverse: false,
                  itemBuilder: (BuildContext context, int index) {
                    ///设置圆圈大小
                    if (index == (url_show - 1)) {
                      circular_with = midlle_circular;
                      circular_bool = true;
                    } else {
                      circular_with = midlle_circular;
                      circular_bool = false;
                    }
                    if (url_show < 3) {
                      if (index == 4) {
                        circular_with = min_circular;
                        circular_bool = false;
                      }
                    }
                    if (itemCount > 5) {
                      ///右边圆圈大小
                      if ((url_show + 1) > 3 && (url_show + 2) < itemCount) {
                        if ((index) == (url_show + 1)) {
                          circular_with = min_circular;
                          circular_bool = false;
                        }
                      }

                      ///左边圆圈大小
                      if ((url_show - 3) != 0 && (url_show - 1) <= 5) {
                        if ((index) == (url_show - 3)) {
                          circular_with = min_circular;
                          circular_bool = false;
                        }
                      } else {
                        if ((url_show + 1) > 5) {
                          if (index == 4) {
                            circular_with = min_circular;
                            circular_bool = false;
                          }
                        }
                      }
                    }

                    return Container(
                      // color: Colors.red,
                      alignment: Alignment.center,
                      child: AnimatedContainer(
                          margin: EdgeInsets.only(
                              left: index != 0 ? 5 : 0,
                              right: index == (itemCount - 1) ? 1 : 0),
                          height: circular_bool ? max_circular : circular_with,
                          width: circular_bool ? max_circular : circular_with,
                          decoration: BoxDecoration(
                              color: Colors.black.withOpacity(0.5),
                              borderRadius:
                                  BorderRadius.circular(circular_with)),
                          duration: Duration(milliseconds: 300)),
                    );
                  },
                  itemCount: itemCount,
                  controller: controller,
                  // itemExtent: 50,
                ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    ///设置显示条数
    if (widget.listmodel.picUrls.length != 0) {
      itemCount = widget.listmodel.picUrls.length;
    } else {
      itemCount = widget.listmodel.videos.length;
    }

    return Column(
      children: [
        //轮播图片
        rotatePictures(),
        //轮播按钮
        carouselButton(),
      ],
    );
  }
}

///图片hero效果
class DynamicHeroPicture extends StatefulWidget {
  final String herourl;
  final String herorandom;

  const DynamicHeroPicture({Key key, this.herourl, this.herorandom})
      : super(key: key);

  @override
  _DynamicHeroPictureState createState() => _DynamicHeroPictureState();
}

class _DynamicHeroPictureState extends State<DynamicHeroPicture> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.black,
      alignment: Alignment.center,
      child: Hero(
        tag: 'hero${widget.herorandom}',
        child: GestureDetector(
          ///指针移动事件
          onVerticalDragUpdate: (v) => Navigator.pop(context),
          // onTap: (){
          //   Navigator.pop(context);
          // },
          child: Image.network(
            widget.herourl,
            fit: BoxFit.cover,
          ),
        ),
      ),
    ));
  }
}
